<script lang="ts" setup>
import { useScrollStore } from '@/stores/scroll'

const route = useRoute()

// 系统状态
const scrollStore = useScrollStore()

// 内容DOM（获取内容高度）
const contentRef = ref<any>(null)
// 滚动事件
let handleScroll = (e: any) => {
  if (!scrollStore.scroll.lenis) {
    // 获取滚动内容总高度
    const contentHeight = contentRef.value.clientHeight
    // 计算比例 (滚动距离/(滚动内容总高度 - 可视区高度))
    let scale = e.target.scrollTop / (contentHeight - window.innerHeight)
    scale = scale > 1 ? 1 : scale
    scrollStore.computerScroll(scale)
  }
}

onMounted(() => {
  scrollStore.initScroll()
})
</script>

<template>
  <el-container class="use-font-theme relative">
    <el-container class="mx-auto items-center w-screen h-screen" direction="vertical">
      <el-header
        :class="
          'header min-w-content h-16 ' +
          (scrollStore.scroll.isDown ? '-translate-y-full opacity-0' : 'opacity-100')
        "
      >
        <Header />
      </el-header>
      <div id="scrollWrapper" class="size-full overflow-y-auto snap-none" @scroll="handleScroll">
        <div id="scrollContent" ref="contentRef" class="w-full min-h-content min-w-content">
          <RouterView v-slot="{ Component }" name="ui">
            <Transition name="ui">
              <component :is="Component" :key="route.fullPath" />
            </Transition>
          </RouterView>
          <Footer />
        </div>
      </div>
      <!--  回到顶部  -->
      <el-container
        :style="{
          transform: 'translateY(' + scrollStore.scroll.scrollTop + 'px)'
        }"
        class="-top-28 duration-100 absolute z-40 right-8 max-sm:right-4"
      >
        <el-container
          :style="{
            transform: !scrollStore.scroll.isDown ? 'rotate(0deg)' : 'rotate(-180deg)'
          }"
          class="toTop_box duration-100 items-center"
          direction="vertical"
        >
          <span @click="scrollStore.toTop()">
            <SvgIcon
              name="plane"
              parent-class="cursor-pointer"
              svg-class="!size-10 max-sm:!size-8"
            />
          </span>
          <span class="rotate-180 flex min-h-16 w-8 relative flex-col justify-center items-center">
            <SvgIcon
              name="cloud"
              parent-class="absolute flow -bottom-2"
              svg-class="!size-6 max-sm:size-3"
            />
            <SvgIcon
              name="cloud"
              parent-class="absolute flow delay-500 -bottom-2"
              svg-class="!size-6 max-sm:size-3"
            />
            <SvgIcon
              name="cloud"
              parent-class="absolute flow delay-1000 -bottom-2"
              svg-class="!size-6 max-sm:size-3"
            />
          </span>
        </el-container>
      </el-container>
    </el-container>
  </el-container>
</template>

<style lang="scss">
.header {
  position: absolute;
  z-index: 99;
  width: 100vw;
  transition:
    opacity 0.5s linear,
    transform 0.5s linear;
}

/* 隐藏滚动条 */
#scrollWrapper {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/*回到顶部*/
.toTop_box {
  transform-origin: center;

  .delay-500 {
    animation-delay: 300ms !important;
  }

  .delay-1000 {
    animation-delay: 600ms !important;
  }

  .flow {
    animation: flow_frames 0.9s linear infinite;
    @keyframes flow_frames {
      from {
        transform: translateY(0);
        scale: 1;
        opacity: 1;
      }
      to {
        transform: translateY(-80px);
        scale: 0.7;
        opacity: 0;
      }
    }
  }
}
</style>
